<template>
  <div class="list">
    <div class="list-header">

    </div>
    <div class="list-content"></div>
  </div>
</template>

<script>
import VirtualList from "vue-virtual-scroll-list";

export default {
  components: {
    VirtualList,
  },
  props: {
    headerHeight: {
      type: String,
      default: '40px',
    },
    options: {
      type: Array,
      default: () => [],
    },
    list: {
      type: Array,
      default: () => [],
    },
    dataKey: {
      type: String,
      default: "id"
    },
    speed: {
      type: Number,
      default: 0.2
    },
    animationTime: {
      type: Number,
      default: 500
    },
    keeps: {
      type: Number,
      default: 10
    }
  },
}
</script>

<style scoped lang="scss">
.list {
  height: 100%;
  position: relative;

  &-header {
    height: var(--header-height);
  }

  &-content {
    height: calc(100% - #{var(--header-height)});
  }
}
</style>
